<template>
    <div class="Box">
        <div class="imgBox">
            <img :src="props.uface"/>
            <span><img src="@/assets/gif/liveWhite.gif" />直播中</span>
        </div>
        <div class="infoBox">
            <p>
                <span v-html="props.uname"></span>
            </p>
            <div class="tagsItem">
                <span>{{ props.cate_name }}</span>
                <span>·</span>
                <span>{{ formatNum(props.attentions) }}关注直播间</span>
                <template v-if="taglist">
                    <p>
                        <tagIcon v-for="item in taglist" :key="item" :title="item" padding="2px 7px"></tagIcon>
                    </p>
                </template>
              
              
            </div>
            <p>
                <el-button v-if="false" disabled style="width:100%">已关注</el-button>
                <el-button v-else type="primary" style="width:100%">+ 关注</el-button>
            </p>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { formatNum } from "@/utils/format"
import tagIcon from "@/components/tagIcon.vue"
import { ref } from "vue"

interface Props{
    uface:string
    uid:number
    attentions:number      //xx人关注直播间
    tags:string             //需要处理 ，隔开 只展示盒子宽度内容
    uname:string            //html name
    cate_name:string        //attxxx前标题 直播类型
}
const props = defineProps<Props>()
const taglist = ref( props.tags? props.tags.split(',') : null )
</script>

<style lang="scss" scoped>
p{
    padding: 0;
    margin: 0;
}
.Box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}
.imgBox{
    max-width: 90px;
    height: 100%;
    margin-right: 15px;
    @include flexRowCenter;
    position: relative;
    & img:nth-child(1){
        flex-shrink: 0;
        max-width: 90px;
        max-height: 90px;
        border-radius: 50%;
    }
    & span:nth-child(2){
        position: absolute;
        bottom: -8px;
        font-size: 12px;
        line-height: 16px;
        padding: 2px 7px;
        border: 3px solid white;
        white-space: nowrap;
        color: white;
        background: #FF6699;
        border-radius:8px;
        @include flexRowCenter;
        gap: 2px;
    }
    & span:nth-child(2) img{
        width: 15px;
        height: 12px;
        border-radius: 0px;
        border: none;
    }
}
.infoBox{
    display: flex;
    flex-direction: column;
    width: 77%;
    justify-content: center;
    align-items: start;
    gap: 5px;
    color: #18191C;
    & p:nth-child(1){
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }
    & p:nth-child(1):hover{
        color: #00AEEC;
    }
    & p:nth-child(3){
        width: 100px;
    }
}
.tagsItem{
    width: 100%;
    height: 20px;
    font-size: 13px;
    line-height: 16px;
    color: #9199A0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 0 10px;
    & p:nth-child(4){
        height: 21px;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    & p:nth-child(4) span{
        scale: 0.9;
    }
}
</style>